<template>
  <div class="page-card dhData">
    <h-query :showKey="['startTime,endTime']" @search="search">

    </h-query>
    <h-table
      ref="htable"
      @init="getList"
      :config="config"
      :showHeadBgNone="true"
      :zebraStripes="true">
      <span slot="content" slot-scope="{text}">
        <a-popover placement="topLeft">
          <template slot="content">
            <div style="max-width: 400px">
              {{ text }}
            </div>
          </template>
          {{ text }}
        </a-popover>
      </span>
      <span slot="isHome" slot-scope="{text, record}">
        <a-switch v-model="record.isHome" @change="showHome(record)"></a-switch>
      </span>
      <span slot="isIndex" slot-scope="{text, record}">
        <a-switch v-model="record.isIndex" @change="showTop(record)"></a-switch>
      </span>
    </h-table>

  </div>
</template>
<script>
import { dhData, dhHome, dhTop } from '@/api/serve';
export default {
  data() {
    return {
      config: {
        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            align: 'center',
            title: '标题',
            dataIndex: 'title',
            width: 300
          },
          {
            align: 'center',
            title: '归属地',
            dataIndex: 'territory'
          },
          {
            align: 'center',
            title: '创建时间',
            dataIndex: 'reaseTime'
          },
          {
            align: 'center',
            title: '内容',
            dataIndex: 'content',
            width: 300,
            ellipsis: true,
            scopedSlots: { customRender: 'content' }
          },
          {
            align: 'center',
            title: '是否在首页展示',
            dataIndex: 'isHome',
            scopedSlots: { customRender: 'isHome' }
          },
          {
            align: 'center',
            title: '是否置顶显示',
            dataIndex: 'isIndex',
            scopedSlots: { customRender: 'isIndex' }
          }
        ],
        pagination: {
          total: 100
        }
      },
      form: {

      },
      selectedRowKeys: [],
      selectedRow: [],
      show: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  methods: {
    getList(params) {
      if (params) {
        Object.assign(this.queryParams, params);
      }
      dhData(this.queryParams).then(res => {
        this.config.dataSource = res.data.records.map(e => {
          return {
            ...e,
            isIndex: !!e.isIndex,
            isHome: !!e.isHome
          };
        });
        this.config.pagination.total = res.data.total;
      });
    },
    remove(record) {
      this.$message.success('终止成功');
      this.$refs.htable.refresh(true);
    },
    search(params) {
      Object.assign(this.queryParams, {
        StartTime: params.startTime,
        EndTime: params.endTime
      });
      this.$refs.htable.refresh();
    },
    showHome({ isHome, id }) {
      dhHome({
        id,
        isHome: isHome ? 1 : 0
      }).then(res => {
        this.$message.success('操作成功');
        this.$refs.htable.refresh(true);
      });
    },
    showTop({ isIndex, id }) {
      dhTop({
        id,
        isIndex: isIndex ? 1 : 0
      }).then(res => {
        this.$message.success('操作成功');
        this.$refs.htable.refresh(true);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.dhData {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   isIndex: 0;
  // }
}
</style>
